<Hmtl>
    <head>
        <title>Getter</title>
    </head>
    <body>
        <script>
            // Getter  

                    /*
                        一、 概述  Getter 是什么？

                                    Getter 是对 state 的加可以认为是 store 实例对象的 "计算属性"， 工，是派生出来的数据(由原始的 state 通过计算派生出来的数据)

                                        ①、 就像 computed 计算属性一样， getter 返回的值会根据它的依赖被缓存起来，且只有当他的依赖值发生改变才会被重新计算。

                                        ②、可以在多组件中共享 getter 函数，这样做可以提高运行效率


                                    在 uni-app 项目根目录下， store 目录 index.js 文件下：

                                          // 页面路径 :  store/index.js

                                          import Vue from 'vue'
                                          import Vuex from 'vuex'

                                          Vue.use(Vuex);

                                          const store = new Vuex.Store({
                                                state:{
                                                    todos:[
                                                        {
                                                            id:1,
                                                            text:'我是内容一',
                                                            done: true
                                                        },
                                                        {
                                                            id:2,
                                                            text:'我是内容二',
                                                            done: false
                                                        }
                                                    ]
                                                },

                                                getters:{
                                                    doneTodos:state=>{
                                                        return state.todos.filter(todo=> todo.done)
                                                    }
                                                }
                                          })

                                          export default store;
                        
                    */

                    /*
                        二、如何注册 getter ?

                                    在创建 store 实例的时候注册 getter,  一个 getter的本质就是一个函数，这个函数的返回值会根据它的依赖被缓存起来。

                                    注册 getter 的函数接受以下参数：

                                        ①、state,如果在模块中定义则为模块的局部状态独享

                                        ②、getters，等同于 store.getters

                                    
                                    在 uni-app 项目根目录下， sotre目录index.js 文件下：

                                        // 页面路径：  store/index.js

                                        import Vue from 'vue'
                                        import Vuex form 'vuex'

                                        Vue.use(Vuex);

                                        const store = new Vuex.Store({
                                            state:{
                                                todos:[
                                                    {
                                                        id:1,
                                                        text:'我是内容一'，
                                                        done:true
                                                    },
                                                    {
                                                        id: 2,
                                                        text: '我是内容二',
                                                        done: false
                                                    }
                                                ]
                                            },
                                            getters:{
                                                doneToDos: state=>{
                                                    return state.todos.filter(todo=>toDo.done)
                                                },
                                                doneTodosCount:(state,getters)=>{
                                                    // state: 可以访问状态数据
                                                    // getters: 访问其他函数，等同于 store.getters

                                                    return getters.doneTodos.lenght
                                                },
                                                // getter 直接返回函数定义，这样可通过传递的参数来加工状态数据
                                                getTodoById:(state)=>(id)=>{
                                                    return state.todos.find(todo=>todo.id===id)
                                                }
                                            }
                                        })

                                        export default store;
                    */

                    /*
                        三、如何获取 getters 

                                1、通过属性访问，  Getter 会暴露我 store.getters 对象，你可以以属性的形式访问这些值。

                                            eg:

                                                    !-- 页面路径 ：  pages/inde/index.vue ---

                                                    <template>
                                                        <view>
                                                            <view v-for="(item,index) in todos">
                                                                <view>{{ item.id}}</view>
                                                                <view>{{ item.text}}</view>
                                                                <view>{{ item.done}}</view>
                                                            </view>
                                                        </view>
                                                    </template>

                                                    <script>
                                                        import store from '@/store/index.js'  // 引入store
                                                        export default{
                                                            computed:{
                                                                todos(){
                                                                    return store.getters.doneTodos
                                                                }
                                                            }
                                                        }
                                                    <//script>

                                                注意, getter 在通过属性访问时是作为 Vue 的响应式系统的一部分缓存其中的。


                                2、通过  this.$store （vue实例属性）访问

                                            eg: 
                                                     !-- 页面路径 : pages/index/index.vue ---

                                                     <template>
                                                         <view>
                                                            <view v-for="(item,index) in todos">
                                                                <view> {{ item.id}} </view>
                                                                <view> {{ item.text }} </view>
                                                                <view> {{ item.done }} </view>
                                                            </view>
                                                         </view>
                                                     </template>
                                                     <script>
                                                        export default{
                                                            computed:{
                                                                todos(){
                                                                    return this.$store.getters.doneTodos
                                                                }
                                                            }
                                                        }
                                                     <//script>
                                    
                                
                                3、通过方法访问

                                            你可以通过让 getter 返回一个函数，来实现给getter 传参。在你对 store 里的数组进行查询时非常有用。

                                            注意：  getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果。

                                            eg:
                                                 !-- 页面路径 : pages/index/index.vue ---

                                                 <template>
                                                    <view>
                                                        <view v-for="(item,index) in todos">
                                                            <view>{{ item }} </view>
                                                        </view>
                                                    </view>
                                                 </template>

                                                 <script>
                                                    export default{
                                                        coumputed:{
                                                            todos(){
                                                                return this.$store.getters[getToDoById](12)
                                                            }
                                                        }
                                                    }
                                                 <//script>

                                4、mapGetters 辅助函数访问

                                            mapGetters 辅助函数仅仅是将 store 中的getter 映射到局部计算属性：

                                            eg:
                                                    !-- 页面路径 ： pages/index/index.vue ----
                                                    <template>
                                                        <view>
                                                            <view>{{doneTOdosCount}}</view>
                                                        </view>
                                                    </template>
                                                    <script>
                                                        import {mapGetters} from 'vuex'  // 引入mapGetters
                                                        export default{
                                                            computed:{
                                                                // 使用对象展开运算符将 getter 混入 computed 对象中
                                                                ...mapGetters({
                                                                    'doneTodos',
                                                                    'doneTodosCount'
                                                                })
                                                            }
                                                        }
                                                    <//script>

                                            如果你想将一个 getter 属性另取一个名字，使用对象形式：

                                                    !-- 页面路径 ：  pages/index/index.vue ---
                                                    <template>
                                                        <view>
                                                            <view> {{ doneCount}} </view>
                                                        </view>
                                                    </template>

                                                    <script>
                                                        import {mapGetters} from 'vuex' // 引入mapGetters
                                                        export default{
                                                            computed:{
                                                                ...mapGetters({
                                                                    // // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
                                                                    doneCount:'doneTodosCount'
                                                                })
                                                            }
                                                        }
                                                    <//script>
                    */

                  
        </script>
    </body>
</Hmtl>